<template>
  <div class="mask" @click.self="close">
    <div class="modal">
      <div class="modal-top">
        <div class="modal-title">
          <div class="modal-title-content">
            {{ props.title }}
          </div>
          <slot name="titleRight"></slot>
        </div>
        <img src="@/assets/images/close.png" @click="closeModal" />
      </div>
      <div class="modal-content">
        <slot name="modalContent"></slot>
      </div>
      <div class="modal-btn" v-if="isShowCancel || isShowComfirm">
        <div class="modal-btn-cancel" v-if="isShowCancel" @click="cancel">
          {{ props.cancelText }}
        </div>
        <div class="modal-btn-confirm" v-if="isShowComfirm" @click="comfirm">
          {{ props.okText }}
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
const emit = defineEmits(['closeModal', 'cancel', 'comfirm'])
const props = defineProps({
  title: { type: String, default: '' },
  okText: { type: String, default: '确定' },
  cancelText: { type: String, default: '取消' },
  isShowCancel: { type: Boolean, default: true }, //是否显示取消按钮
  isShowComfirm: { type: Boolean, default: true }, //是否显示确认按钮
  maskClosable: { type: Boolean, default: true } // 点击蒙层是否可关闭
})

const close = () => {
  if (!props.maskClosable) return
  closeModal()
}

const closeModal = () => {
  emit('closeModal')
}

const cancel = () => {
  emit('cancel')
}

const comfirm = () => {
  emit('comfirm')
}
</script>

<style lang="less" scoped>
.mask {
  position: fixed;
  top: 0;
  left: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.4);
  z-index: 1000;
  .modal {
    padding: @gap;
    border-radius: 24px;
    background-color: #ffffff;
    .modal-top {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: @gap;
      .modal-title {
        display: flex;
        font-size: @big-size;
        color: @emphasize-font-color;
        font-weight: 700;
        .modal-title-content {
          font-size: @big-size;
        }
      }
    }
    .modal-btn {
      display: flex;
      justify-content: flex-end;
      margin-top: @gap;
      cursor: pointer;
      div {
        padding: 0 16px;
        margin-left: 12px;
        height: 32px;
        line-height: 32px;
        text-align: center;
        border-radius: 8px;
      }
      .modal-btn-confirm {
        color: #ffffff;
        background: @theme-color;
      }

      .modal-btn-confirm,
      .modal-btn-cancel {
        cursor: pointer;
      }
    }
  }
}
</style>
